<template>
	<div class="bg">
		<div class="zzc" v-if="showzzc" @click="close"></div>
		<div class="container">
			<div class="search_box">
				<div class="select_box" @click.stop="options_show=!options_show;showzzc=!showzzc">
					<div class="form-control" id="select" style="width: 120px;">
						<div :style="ind=='all'?'color:#999':''">
							{{ind!='all'?types[ind].name:'查询方式'}}
						</div>
						<div v-if="ind!='all'" @click.stop="closeall">
							<img src="@assets/images/close.png" alt="">
						</div>
						<img src="@assets/images/down.png" alt="">
					</div>
					<div class="options" v-if="options_show">
						<!-- <div class="option" style="color: #999;">选择解决方式</div>
						<div class="option" @click="selectit2('all')">全部</div> -->
						<div class="option" @click.stop="selectit(index)" v-for="item,index in types">{{item.name}}
						</div>
					</div>
				</div>

				<el-date-picker v-if="ind==0||ind==2 || ind==1" prefix-icon='none' ref="year"
					style="width: 120px;margin-left: 10px;" v-model="info.year" type="year" @change="changedate(3)"
					value-format="yyyy" placeholder="年份">
				</el-date-picker>

				<div class="select_box" v-if="ind==2" @click.stop="options_show2=!options_show2;showzzc=!showzzc">
					<div class="form-control" id="select" style="width: 120px;">
						<div :style="ind2=='all'?'color:#999;':''">
							{{ind2!='all'?quarter[ind2]:'季度'}}
						</div>
						<div v-if="ind2!='all'" @click.stop="info.quarter='',ind2='all'">
							<img src="@assets/images/close.png" alt="">
						</div>

						<img src="@assets/images/down.png" alt="">
					</div>
					<div class="options" v-if="options_show2">
						<div class="option" @click.stop="selectit2(index)" v-for="item,index in quarter">{{item}}</div>
					</div>
				</div>

				<div class="select_box" v-if="ind==1" @click.stop="options_show3=!options_show3;showzzc=!showzzc">
					<div class="form-control" id="select" style="width: 120px;">
						<div :style="ind3=='all'?'color:#999;width:40px':'width:40px'">
							{{ind3!='all'?month[ind3]:'月'}}
						</div>
						<div v-if="ind3!='all'" @click.stop="info.month='',ind3='all'">
							<img src="@assets/images/close.png" alt="">
						</div>

						<img src="@assets/images/down.png" alt="">
					</div>
					<div class="options" v-if="options_show3">
						<div class="option" @click.stop="selectit3(index)" v-for="item,index in month">{{item}}</div>
					</div>
				</div>

				<el-date-picker v-if="ind==3" prefix-icon='none' style="width: 120px;margin-left: 10px;"
					v-model="startDate" type="date" @change="changedate(1)" value-format="timestamp" placeholder="开始日期">
				</el-date-picker>
				<el-date-picker v-if="ind==3" prefix-icon='none' style="width: 120px;margin-left: 10px;"
					v-model="endDate" type="date" @change="changedate(2)" value-format="timestamp" placeholder="结束日期">
				</el-date-picker>


				<div class="input-cont" style="margin-left:10px;width: 170px;">
					<input type="text" class="form-control" readonly v-model="enrname==''?'':enrname" placeholder="工程师">

					<img src="@assets/images/close.png" class="clears" alt="" v-if="enrname!=''"
						@click="enrname = '';info.engineerId=''">
					<span class="iconfont icon-list" data-toggle="modal" data-target="#keshi"
						@click="alert_enger=!alert_enger;"></span>
				</div>


				<div class="input-cont" style="margin-left:10px;width: 170px;">
					<input type="text" class="form-control" readonly v-model="departname" placeholder="报修科室">

					<img src="@assets/images/close.png" class="clears" alt="" v-if="departname"
						@click="departname = '';info.departId=''">
					<span class="iconfont icon-list" data-toggle="modal" data-target="#keshi"
						@click="alert_show=!alert_show;"></span>
				</div>

				<div class="sea_btn sear_btns" @click="getlist();getpielist()">
					<img src="@assets/images/search.png" alt="">
					查询
				</div>

			</div>


			<div class="box">
				<div class="box_top">
					<div class="box_top_left">
						<div class="pie" ref="pie"></div>
						<img @click="back" class="back" src="@/assets/images/back.png" alt="">
					</div>
					<div class="box_top_left" style="padding: 17px 23px;">
						<div class="table">
							<div class="table_top">
								<div class="table_title">故障原因分类报表</div>
							</div>
							<el-table :data="pie" style="width: 100%" height="288"
								:default-sort="{prop: 'name', order: 'descending'}">
								<el-table-column prop="name" label="故障原因" sortable>
								</el-table-column>
								<el-table-column prop="value" label="报修次数" sortable>
								</el-table-column>
							</el-table>
						</div>
					</div>
				</div>
				<div class="box_top">
					<!-- <div class="box_top_left" style="width: 100%;" ref="container"></div> -->
				</div>

				<div class="table">
					<div class="table_top">
						<div class="table_title">按故障原因统计汇总表</div>
						<div class="top_btns">
							<div class="export" @click="export2Excel" v-if="$permissions.indexOf(85)  != -1">导出</div>
							<div class="print" @click="tabshow=true">打印</div>
						</div>
					</div>

					<el-table :data="tableData" style="width: 100%" row-key="id"
						:default-sort="{prop: 'date', order: 'descending'}"
						:tree-props="{children: 'children', hasChildren: 'hasChildren'}" default-expand-all>
						<el-table-column prop="name" label="故障原因" sortable>
						</el-table-column>
						<el-table-column prop="count" label="报修次数" sortable>
						</el-table-column>
						<el-table-column prop="persent" label="占比(%)" sortable>
						</el-table-column>
						<el-table-column prop="responseTime" label="响应时长（小时）" sortable>
						</el-table-column>
						<el-table-column prop="processTime" label="处理时长（小时）" sortable>
						</el-table-column>
						<el-table-column prop="totalTime" label="总时长（小时）" sortable>
						</el-table-column>
					</el-table>
				</div>
			</div>
			<div class="blackzzc" v-if="tabshow">
				<div class="tablealert" id="printDiv">
					<div class="top_btns">
						<div class="print" @click="print">确认打印</div>
						<div class="export" @click="tabshow=false">关闭</div>
					</div>
					<vueEasyPrint ref="easyPrint" tableShow>
						<div class="altabletitle">按故障原因统计汇总表</div>
						<table border="1" cellspacing='0'
							style="width:1000px;margin: 0 auto;text-align: center;color: #000;">
							<tr>
								<td>故障原因</td>
								<td>报修次数</td>
								<td>占比</td>
								<td>响应时长（小时）</td>
								<td>处理时长（小时）</td>
								<td>总时长（小时）</td>
							</tr>
							<tr v-for="item in tableData">
								<td>{{item.name}}</td>
								<td>{{item.count}}</td>
								<td>{{item.persent}}</td>
								<td>{{item.responseTime}}</td>
								<td>{{item.processTime}}</td>
								<td>{{item.totalTime}}</td>
							</tr>
						</table>
					</vueEasyPrint>
				</div>
			</div>


			<!--选择科室弹窗-->
			<div :class="alert_show?'modal in fade':'modal fade'" tabindex="-1" role="dialog" id="keshi"
				:style="alert_show?'display: block;z-index:199':''">
				<div class="cent w600"
					style="justify-content: center;width: 600px;height: calc(100% - 312px);margin: 156px auto;">
					<div class="modal-dialog" role="document">
						<div class="modal-content">
							<div class="modal-header tit">
								<em></em>选择科室
								<div class="right" @click="alert_show=false;roomsearch = '';getallrooms()">
									<button type="button" class="close" data-dismiss="modal" aria-label="Close"
										style="line-height: normal;"><span class="iconfont icon-cha"
											aria-hidden="true"></span> </button>
								</div>
							</div>
							<!--表单-->
							<div class="modal-body h100 search-cont" style="height: calc(100vh - 500px);">
								<div class="search">
									<div class="form-group" style="display: flex;padding-right: 0;">
										<input class="form-control" autocomplete="off" @keydown.enter="getallrooms"
											placeholder="输入关键字" v-model="roomsearch">

										<div style="margin-left: 10px;" class="btn btn-success" @click="getallrooms">
											<span class="iconfont icon-chaxun"
												style="line-height: 34px;vertical-align: baseline;"></span>
										</div>
									</div>
								</div>
								<div class="treelist" v-if="roomsearch">
									<div v-if="allrooms.length > 0">
										<div class="li" v-for="item in allrooms" @click="sear_choserome(item)">
											{{item.name}}
										</div>
									</div>
									<h2 class="tcent" v-else>搜索不到该内容</h2>
								</div>
								<div class="zTreeDemoBackground left"
									:style="roomsearch==''?'display:block':'display:none'">
									<ul id="treeDemo" class="ztree" @select="choseroom"></ul>
								</div>
							</div>
							<div class="modal-footer tcent">
								<button class="btn btn-primary"
									@click="alert_show=false;roomsearch = '';getallrooms()">确定</button>
								<button class="btn btn-info"
									@click="alert_show=false;roomsearch = '';getallrooms()">关闭</button>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!--选择工程师弹窗-->
			<div :class="alert_enger?'modal in fade':'modal fade'" tabindex="-1" role="dialog" id="keshi"
				:style="alert_enger?'display: flex;align-items: center;z-index:199;':'z-index:199;'">
				<div class="cent w600"
					style="justify-content: center;width: 712px !important;height:600px;">
					<div class="modal-dialog" role="document" style="width: 100%;">
						<div class="modal-content">
							<div class="modal-header tit">
								<em></em>工程师选择
								<div class="right" @click="alert_enger=false;engid=''">
									<button type="button" class="close" data-dismiss="modal" aria-label="Close"
										style="line-height: normal;"><span class="iconfont icon-cha"
											aria-hidden="true"></span> </button>
								</div>
							</div>
							<!--表单-->
							<div class="modal-body h100 search-cont" style="padding: 15px 27px;height: 450px;">
								<div class="chosed" v-if="enrname==''">暂未选择工程师</div>
								<div class="chosed" v-else>已选择：{{enrname}}</div>

								<!-- 	<div class="al_box">
									<div class="enr_title">常用联系人 <span>设置</span></div>
									<div class="enr_list">没有常用联系人</div>
								</div> -->

								<div class="al_box" v-for="item in enrlist">
									<div class="enr_title">{{item.name}}</div>
									<div class="enr_list">
										<div class="enr_li" v-for="item2 in item.children">
											<input type="radio" name="choses"
												@change="enrname=item2.realName;info.engineerId = item2.id"
												:value="item2.id" v-model="info.engineerId"
												:id="item2.realName+item2.id"><label
												:for="item2.realName+item2.id"></label>
											<label :for="item2.realName+item2.id"
												style="margin-bottom: 0;">{{item2.realName}}</label>
										</div>
									</div>
								</div>
							</div>
							<div class="modal-footer tcent">
								<button class="btn btn-primary"
									@click="alert_enger=false;info.engineerId=''">确定</button>
								<button class="btn btn-info close_eng"
									@click="alert_enger=false;info.engineerId=''">关闭</button>
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>
</template>
<script>
	import $ from 'jquery'
	import vueEasyPrint from "vue-easy-print"

	export default {
		name: "",
		components: {
			vueEasyPrint,
		},
		data() {
			return {
				tabshow: false,
				types: [{
						name: '按年份',
						id: 1
					},
					{
						name: '按月份',
						id: 2
					},
					{
						name: '按季节',
						id: 3
					},
					{
						name: '按区间',
						id: 4
					},
				],
				quarter: ['第一季度', '第二季度', '第三季度', '第四季度'],
				month: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
				ind: 1,
				ind2: 'all',
				ind3: 'all',
				showzzc: false,
				options_show: false,
				options_show2: false,
				options_show3: false,
				alert_show: false,
				alert_enger: false,
				roomsearch: "",
				allrooms: [],
				departname: "",
				departId: "",
				engid: "",
				treeClickCount: 0,
				phraseList: [],
				setting: {
					treeId: 'id',
					data: {
						key: {
							name: 'name'
						}
					},
					callback: {
						onClick: this.choseroom
					}
				},
				zNodes: [],
				enrname: "",
				enrlist: [],
				tableData: [],
				startDate: "",
				endDate: "",
				info: {
					searchType: 2,
					startDate: "",
					endDate: "",
					quarter: "",
					engineerId: "",
					departId: "",
					year: "",
					month: "",
					parentId: 0
				},
				pie: [],
				piename:'总体分析'
			}
		},
		mounted() {
			this.timeFormate();
			this.getallrooms();
			this.getrooms();
			this.getlist();
			this.getpielist();
			this.getenrlist();
			this.getbar();
		},
		watch: {
			roomsearch: {
				handler(newValue, oldValue) {
					if (newValue == '') {

					} else {
						this.getallrooms();
					}
				}
			},
		},
		methods: {
			print() {
				this.$refs.easyPrint.print()
			},
			export2Excel() {
				require.ensure([], () => {
					const {
						export_json_to_excel
					} = require('../../../lib/Export2Excel.js') //刚刚新建Export2Excel.js文件的路径
					const tHeader = ['故障原因', '报修次数', '占比', '响应时长（小时）', '处理时长（小时）',
						'总时长（小时）'
					] //自定义列名
					const filterVal = ['name', 'count', 'persent', 'responseTime', 'processTime',
						'totalTime'
					] //对应自怼
					const list = this.tableData //table数据
					const data = this.formatJson(filterVal, list);
					const merges = ["A1:F1"]
					export_json_to_excel(tHeader, data, '按故障原因统计汇总表', merges); //导出文件名称
				})
			},
			formatJson(filterVal, jsonData) {
				// console.info(jsonData)
				return jsonData.map(v => filterVal.map(j => v[j]))
			},
			closeall() {
				this.info.searchType = ''
				this.info.year = ''
				this.info.quarter = ''
				this.info.month = ''
				this.info.startDate = ''
				this.info.endDate = ''
				this.ind = 'all'
				this.showzzc = false
				this.options_show = false
			},
			back() {
				this.info.parentId = 0
				this.piename='总体分析'
				this.pie = []
				this.getpielist()
			},
			//显示当前时间（年月日时分秒）
			timeFormate(timeStamp) {
				if (timeStamp) {
					let year = new Date(timeStamp).getFullYear();
					let month = new Date(timeStamp).getMonth() + 1
					let date = new Date(timeStamp).getDate()
					return year + "-" + month + "-" + date;
				} else {
					timeStamp = new Date()
					let year = new Date(timeStamp).getFullYear();
					let month = new Date(timeStamp).getMonth() + 1
					// console.log(month)
					this.info.year = year.toString()
					this.ind3 = month - 1
					this.info.month = month
				}
			},
			// 获取饼状图数据
			getpielist() {
				this.pie = []
				var that = this
				var param = this.info
				this.$http.post(this.$url + '/statistics/fault/cause/pie', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						console.log(response.data.data)
						for (var i = 0; i < response.data.data.length; i++) {
							that.pie.push({
								name: response.data.data[i].name,
								value: response.data.data[i].count,
								id: response.data.data[i].id,
								pid: response.data.data[i].parentId
							})
						}
						that.getpie();
					})

					.catch(function(error) {
						console.log(error);
					});
			},
			getlist() {

				if (this.info.year == '' && this.info.searchType == 1) {
					this.$Toast('请选择年份');
					return
				}
				if (this.info.searchType == 1) {
					this.info.month = ''
				}
				if (this.info.searchType == 2) {
					if (this.info.year == '' || this.info.month == '' || this.info.year == null) {
						this.$Toast('请选择年份和月份');
						return
					}
					// return
				}

				if (this.info.searchType == 3) {
					if (this.info.year == '' || this.info.quarter == '' || this.info.year == null) {
						this.$Toast('请选择年份和季度');
						return
					}
					// return
				}
				if (this.info.searchType == 4) {
					if (this.startDate == '' || this.endDate == '' || this.startDate == null || this
						.endDate == null) {
						this.$Toast('请选择开始日期和结束日期');
						return
					}
					console.log(this.timeFormate(this.info.startDate))
					this.info.startDate = this.timeFormate(this.startDate)
					this.info.endDate = this.timeFormate(this.endDate)
					// return
				}

				var that = this
				var param = this.info
				this.$http.post(this.$url + '/statistics/fault/cause/table', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.tableData = response.data.data
					})
					.catch(function(error) {
						console.log(error);
					});
			},
			formatter(row, column) {
				return row.address;
			},
			getbar() {
				var dom = this.$refs.container
				var myChart = this.$echarts.init(dom, null, {
					renderer: 'canvas',
					useDirtyRect: false
				});
				var app = {};

				var option;

				option = {
					title: {
						text: "科室保修情况",
						top: 0,
						textStyle: {
							fontSize: 16,
							color: "#626262",
						},
						// padding: 17,
						left: 14
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					grid: {
						top: 70,
						left: 20,
						right: 20,
						bottom: 9,
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						data: ['信息中心', '保卫科', '财务室', '急诊科', '外科', '内科', '心内科', '神经内科', '骨科', '眼科', '耳鼻喉',
							'皮肤科', '医学美容', '儿科'
						],
						axisLabel: {
							interval: 0,
							rotate: 30
						}
					}],
					yAxis: [{
						type: 'value',
						name: '报修数量',
						min: 0,
						max: 5,
						interval: 1,
						axisLabel: {
							formatter: '{value}次'
						}

					}],
					series: [{
						data: [5, 4, 4, 3, 3, 2, 3, 3, 4, 3, 2, 1, 1, 1],
						type: 'bar',
						barMaxWidth: 70,
						barWidth: 40,
						itemStyle: {
							color: '#527cff'
						},
					}]
				};

				if (option && typeof option === 'object') {
					myChart.setOption(option);
				}

				window.addEventListener('resize', myChart.resize);
			},
			getpie() {
				var dom = this.$refs.pie
				var myChart = this.$echarts.init(dom, null, {
					renderer: 'canvas',
					useDirtyRect: false
				});
				var app = {};

				var option;

				option = {
					title: {
						text: this.piename,
						top: 0,
						textStyle: {
							fontSize: 16,
							color: "#626262",
						},
						// padding: 17,
						left: 14
					},
					tooltip: {
						trigger: 'item',
						formatter: '{a} <br/>{b} : {c} ({d}%)'
					},
					legend: {
						// top: 'bottom',
						right: 0,
						bottom: 15
					},
					grid: {
						top: 0,
						left: 20,
						right: 20,
						bottom: 0,
						containLabel: true
					},
					series: [{
						name: this.piename,
						itemStyle: {
							borderRadius: 6,
							borderColor: '#fff',
							borderWidth: 2
						},
						type: 'pie',
						radius: '60%',

						data: this.pie,

					}],
					color: ['#527cff', '#91cc75', '#fac858', '#ff9900']
				};

				if (option && typeof option === 'object') {
					myChart.setOption(option);
				}

				myChart.on("click", this.clickFunc);
				window.addEventListener('resize', myChart.resize);
			},
			clickFunc(e) {
				console.log(e.data)
				this.piename = e.data.name+'分析'
				this.info.parentId = e.data.id
				this.pie = []
				// this.getpielist()
				var that = this
				var param = this.info
				this.$http.post(this.$url + '/statistics/fault/cause/pie/point', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						console.log(response.data.data)
						for (var i = 0; i < response.data.data.length; i++) {
							that.pie.push({
								name: response.data.data[i].name,
								value: response.data.data[i].count,
								id: response.data.data[i].id,
								pid: response.data.data[i].parentId
							})
						}
						that.getpie();
					})

					.catch(function(error) {
						console.log(error);
					});
			},

			selectit(i) {
				this.ind = i
				this.options_show = false
				this.info.searchType = this.types[this.ind].id
				this.info.month = ''
				this.ind3 = 'all'
				if (this.ind == 3) {
					this.info.year = ''
					this.info.quarter = ''
					this.info.month = ''
				}
				this.showzzc = false
			},
			selectit2(i) {
				this.ind2 = i
				this.options_show2 = false
				this.info.quarter = this.ind2 + 1
				this.showzzc = false
			},
			selectit3(i) {
				this.ind3 = i
				this.options_show3 = false
				this.info.month = this.month[this.ind3]
				this.showzzc = false
			},
			getenrlist() {
				var that = this

				this.$http.post(this.$url + '/group/listAll')
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.enrlist = response.data.data
						that.zNodes_eng = response.data.data
						that.ztree_obj_eng = $.fn.zTree.init($("#treeDemo5"), that.setting_eng, that.zNodes_eng);
						var nodes4 = that.ztree_obj_eng.getNodes();
						for (var i = 0; i < nodes4.length; i++) { //设置节点展开
							that.ztree_obj_eng.expandNode(nodes4[i], true, false, true);
						}
					})
					.catch(function(error) {
						sessionStorage.setItem('token', 'undefined')
						that.$router.push('/login')
					});

			},
			// 科室树状图选择
			choseroom(data, node, treeNode) {
				this.treeClickCount++;
				if (this.treeClickCount >= 2) {
					return;
				}
				this.timer = window.setTimeout(() => {
					if (this.treeClickCount == 1) {
						this.treeClickCount = 0;
						console.log('单击事件,可在此处理对应逻辑')

						this.info.departId = treeNode.id
						this.departname = treeNode.name

					} else if (this.treeClickCount > 1) {
						this.treeClickCount = 0;
						console.log('双击事件,可在此处理对应逻辑')
					}
				}, 300);
			},
			sear_choserome(item) {
				this.info.departId = item.id
				this.departname = item.name
			},
			// 获取科室
			getrooms() {
				var param = {
					parentId: 0
				}
				var that = this
				this.$http.post(this.$url + '/sys/dept/tree', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}

						that.zNodes = response.data.data
						that.ztree_obj = $.fn.zTree.init($("#treeDemo"), that.setting, that.zNodes);
						var nodes = that.ztree_obj.getNodes();
						for (var i = 0; i < nodes.length; i++) { //设置节点展开
							that.ztree_obj.expandNode(nodes[i], true, false, true);
						}
					})
					.catch(function(error) {
						console.log(error);
						// sessionStorage.setItem('token','undefined')
						// that.$router.push('/login')

						that.$Toast('网络拥堵，刷新一下');
					});

			},
			// 获取全部科室
			getallrooms() {
				var that = this
				var url = encodeURI(this.$url + '/sys/dept/select?name=' + this.roomsearch)
				this.$http.get(url)
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.allrooms = response.data.data
					})
					.catch(function(error) {
						console.log(error);
					});
			},
			// 点击遮罩层
			close() {
				this.options_show = false
				this.options_show2 = false
				this.options_show3 = false
				this.showzzc = false
			},
			changedate(ty) {
				if (this.startDate && this.endDate && this.startDate > this.endDate) {
					this.$Toast('选择的结束日期在开始日期之前');
					if (ty == 1) {
						this.startDate = ''
					} else {
						this.endDate = ''
					}
					// return
				}
			},
		}
	}
</script>
<style scoped>
	.back {
		position: absolute;
		z-index: 50;
		top: 10px;
		right: 15px;
		width: 30px;
		cursor: pointer;
	}

	.pie {
		width: 100%;
		height: 100%;
	}

	/deep/ .el-table__indent {
		display: none;
	}

	/deep/ .el-table .el-table__expand-icon {
		display: none;
	}

	/deep/ .box_top_left .el-table thead tr,
	/deep/ .box_top_left .el-table th.el-table__cell {
		background-color: #ddd;
		color: #626262;
	}

	/deep/ .el-table th.el-table__cell>.cell {
		color: #626262;
	}

	/deep/ .el-input__icon {
		line-height: 34px;
	}

	/deep/ .el-table .el-table__cell {
		text-align: center;
	}

	/deep/ .el-table .el-table__cell:nth-of-type(1) {
		text-align: left;
	}

	/deep/ .el-table .el-table__cell:nth-of-type(2) {
		text-align: left;
		color: #32B16C;
	}

	/deep/ .el-table .el-table__cell:nth-of-type(3) {
		color: #FF3300;
	}

	/deep/ .el-table .el-table__cell:nth-of-type(4),
	/deep/ .el-table .el-table__cell:nth-of-type(5),
	/deep/ .el-table .el-table__cell:nth-of-type(6) {
		color: #32B16C;
	}


	.table_top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 6px;
		margin-bottom: 11px;
	}

	.table_title {
		font-size: 16px;
		font-weight: bold;
		color: #626262;
	}

	.top_btns {
		display: flex;
	}

	.top_btns div {
		font-size: 14px;
		color: #FFFFFF;
		text-align: center;
		line-height: 28px;
		border-radius: 3px;
		width: 63px;
		height: 28px;
		margin-left: 13px;
		cursor: pointer;
	}

	.print {
		background: #32B16C
	}

	.export {
		background: #5BC0DE;
	}

	.bg {
		background: #f6f6f6;
		min-height: 100vh;
	}

	.box_top_left {
		padding-top: 17px;
		height: 370px;
		width: 49%;
		background-color: #fff;
		position: relative;
	}

	.search_box {
		padding-bottom: 17px;
	}

	.box_top {
		display: flex;
		justify-content: space-between;
		margin-bottom: 17px;
	}

	.box {
		-ms-overflow-style: none !important;
	}

	.box::-webkit-scrollbar {
		display: none;
	}

	.box {
		width: 100%;
		overflow-y: scroll;
		height: calc(100vh - 116px);
		/* padding: 17px 0 0; */
	}

	/deep/ .el-input--prefix .el-input__inner {
		height: 34px;
		padding: 0 8px;
	}

	.input-cont:hover .clears {
		display: block;
	}

	.clears {
		width: 10px;
		position: absolute;
		right: 35px;
		top: 14px;
		display: none;
		cursor: pointer;
	}

	.el-input__inner {
		width: 114px;
		height: 34px;
		background: #F6F6F6;
		border: 1px solid #CCCCCC;
		box-shadow: 0px 2px 0px 0px #EEEEEE;
		border-radius: 5px;
	}
</style>
